<template>
  <view class="my-page" @touchstart="handlerTouchStart" @touchmove="handlerTouchMove" @touchend="handlerTouchEnd">
    <!-- 头部区域 -->
    <view class="header" :style="{'padding-top': topPadding+'px','padding-bottom':wideValue+'px'}">
      <!-- 个人信息部分 -->
      <view class="user-info">
        <!-- 左侧头像及信息 -->
        <view class="user-info-left-box">
          <image fit="cover" @click="handlePreviewAvatar" :src="userAvatar" class="user-info-avatar"></image>
          <view v-if="!userObj.id" class="login-container" @click="handleSubmitLogin">
            <text class="login-btn">登录</text>
          </view>
          <view class="id-num-box" v-else>
            <view class="user-name">{{userObj.userName}}</view>
            <view class="user-ids" v-show="userObj.id">
              <text class="user-id">ID：{{userObj.id}}</text>
              <view class="user-tags" v-if="userTag">
                {{userTag}}
              </view>
            </view>
          </view>
        </view>
        <!-- 右侧个人资料修改入口 -->
        <view class="user-info-right-box" v-if="userObj.id" @click="handleJumpPage('/pages/my/material/material')">
          <text class="text">个人资料</text>
          <uni-icons class="right-icon" custom-prefix="iconfont" type="icon-back" color="#fff" size="28rpx">
          </uni-icons>
        </view>
      </view>
      <!-- 个人数据部分 -->
      <view class="user-data">
        <block v-for="(item,index) in headerNavList" :key="index">
          <view @click="handleJumpPage(item.url)">
            <text>{{item.num | filterNumber}}</text>
            <text>{{item.text}}</text>
          </view>
        </block>
      </view>
    </view>

    <!-- 圆弧及功能列表区域 -->
    <view class="drag-content" :style="{transform: 'translateY('+translateY+'rpx)',transition:transition}">
      <!-- 圆弧区域 -->
      <view class="arc-container"></view>
      <scroll-view scroll-y="true" class="scroll-container">
        <!-- 功能列表区域 -->
        <view class="my-functions">
          <block v-for="(item,index) in contentNavList" :key="index">
            <view @click="handleJumpPage(item.url)">
              <uni-icons custom-prefix="iconfont" :type="item.icon" size="24"></uni-icons>
              <text>{{item.text}}</text>
            </view>
          </block>
          <view @click="handleOpenContact">
            <uni-icons custom-prefix="iconfont" type="icon-lianxiwomen" size="24"></uni-icons>
            <text>联系我们</text>
          </view>
        </view>
        <view class="copyright">
          <navigator url="https://beian.miit.gov.cn/" target="_blank">京ICP备2023007052号-1</navigator>
        </view>
        <!-- 退出登录 -->
        <view class="exit-container" v-if="userObj.id" @click="handlerExitLogin">
          <view class="exit-btn">
            退出登录
          </view>
        </view>
      </scroll-view>

    </view>

    <!-- 联系我们 （弹窗）-->
    <uni-popup ref="popup" type="center">
      <view class="contact-us">
        <image class="contact-us-logo" src="/static/cat.png" mode="widthFix"></image>
        <view class="contact-us-content">
          <text class="contact-us-content-title">联系我们</text>
          <text>微信：{{contactData.wx ? contactData.wx : 'SQ200223'}}</text>
          <text>QQ：{{contactData.qq ? contactData.qq : '1776017814'}}</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    postLoginApi,
    getRelationApi,
    getUserNumApi,
    getUserInfo
  } from "@/api/my/my.js"
  const wideValue = 50;
  export default {
    data() {
      return {
        headerNavList: [{ // 头部导航列表
            text: "我的文章",
            url: "/pages/my/issue/issue",
            num: 0
          },
          {
            text: "我的关注",
            url: "/pages/my/attention/attention",
            num: 0
          },
          {
            text: "我的粉丝",
            url: "/pages/my/fans/fans",
            num: 0
          }
        ],
        contentNavList: [{ // 内容导航列表
            text: "商品管理",
            url: "/pages/my/goods/goods",
            icon: "icon-shangpinguanli"
          },
          {
            text: "账号认证",
            url: "/pages/my/approve/approve",
            icon: "icon-zhanghaorenzheng"
          },
          {
            text: "推广有礼",
            url: "/pages/my/promotion/promotion",
            icon: "icon-tuiguangyouli"
          },
          {
            text: "意见反馈",
            url: "/pages/my/feedback/feedback",
            icon: "icon-yijianfankui"
          }
        ],
        userObj: {}, // 用户对象
        showContact: false, // 联系我们
        contactData: {}, // 联系我们对象
        moveDistance: 0, // 当前产生的距离
        moveY: 0, // 拖拽时候的Y点
        startY: 0, // 初始位置的Y点
        wideValue: wideValue,
        translateY: 0, // 自身Y点
        transition: "0s", // 动画时长
        topPadding: 0
      };
    },
    // 从本地缓存中获取一下最新用户对象
    onReady() {
      // #ifdef MP-WEIXIN  
      // 获取系统信息
      const SystemInfo = uni.getSystemInfoSync();
      // 获取状态栏高度
      let statusBarHeight = SystemInfo.statusBarHeight;
      // 获取胶囊体高度
      let titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
      // 计算两者总和高度
      this.topPadding = statusBarHeight + titleBarHeight;
      // #endif

      // #ifdef H5
      this.topPadding = 25;
      // #endif
    },
    onShow() {
      this.handleGetRelation();
      getApp().globalData.getUser();
      if (getApp().globalData.login) {
        this.handleAfterLogin();
      }
    },
    computed: {
      // 用户头像
      userAvatar() {
        return this.userObj && this.userObj.avatar ? this.userObj.avatar : '/static/images/defaultAvatar.jpg';
      },
      // 用户标签
      userTag() {
        let text = '';
        if (this.userObj && this.userObj.badge) {
          text = "优质博主"
        }
        return text;
      }
    },
    methods: {
      handleAfterLogin() {
        this.handleGetUserNum()
        this.getUserInfo();
      },
      handleOpenContact() {
        this.$refs.popup.open('center')
      },
      // 获取用户信息
      async getUserInfo() {
        const {
          data: result
        } = await getUserInfo()
        if (result.success) {
          let data = result.data.user;
          this.userObj = data;
        }
      },
      // 获取联系我们
      async handleGetRelation() {
        const {
          data: result
        } = await getRelationApi()
        if (result.success) {
          this.contactData = result.data.list
        }
      },
      // 获取文章，粉丝，关注数量
      async handleGetUserNum() {
        const {
          data: result
        } = await getUserNumApi()
        if (result.success) {
          this.headerNavList[0].num = result.data.communityData.articleNum
          this.headerNavList[1].num = result.data.communityData.answerUserNum
          this.headerNavList[2].num = result.data.communityData.fansNum
          uni.showTabBar()
        }

      },
      handlePreviewAvatar() {
        if (this.userObj.id) {
          uni.previewImage({
            current: 0,
            urls: [this.userAvatar]
          })
          return;
        } else {
          this.handleSubmitLogin();

        }
      },
      // 登录
      handleSubmitLogin() {
        // #ifdef  H5
        uni.navigateTo({
          url: '/pages/account/login'
        })
        // #endif

        // #ifdef MP-WEIXIN
        uni.showLoading({
          title: "正在登录"
        })
        uni.login({
          success: async (res) => {
            const {
              data: result
            } = await postLoginApi({
              code: res.code
            });
            if (result.success) {
              let loginData = result.data.login;
              this.userObj = loginData
              getApp().globalData.setUser(loginData);
              getApp().globalData.handleLogin();
              this.handleAfterLogin()
              uni.showTabBar()
              uni.$emit('message-socket')
            
            } else {
              uni.showToast({
                title: "登录失败",
                icon: "none"
              })
            }
          },
          fail: () => {

          },
          complete: () => {
            uni.hideLoading()
          }
        })
        // #endif

      },
      // 跳转不同界面
      handleJumpPage(url) {
        // 查看是否登录再进行跳转
        if (!getApp().globalData.login) {
          uni.showToast({
            title: '请先进行登录',
            icon: 'none',
            duration: 1000
          })
          return
        }

        if (url == '/my/promotion/promotion') {
          uni.showToast({
            title: '功能暂未开放',
            icon: 'none',
            duration: 1000
          })
        } else {
          uni.navigateTo({
            url: url
          })
        }
      },
      // 开始拖拽
      handlerTouchStart(event) {
        // this.transition = '0s'
        this.transition = 'all 0.3s linear'
        this.startY = event.touches[0].clientY
      },
      // 拖拽中
      handlerTouchMove(event) {
        this.moveY = event.touches[0].clientY
        this.moveDistance = this.moveY - this.startY
        if (this.moveDistance >= 0 && this.moveDistance < this.wideValue) {
          this.translateY = this.moveDistance - this.wideValue;
        }
      },
      // 结束拖拽
      handlerTouchEnd() {
        this.transition = 'all 0.3s linear'
        this.translateY = -1 * this.wideValue
      },
      // 退出登录
      handlerExitLogin() {
        uni.showModal({
          title: '是否退出登录？',
          success: (res) => {
            if (res.confirm) {
              getApp().globalData.setUser(null);
              this.userObj = {}
              this.headerNavList.forEach(item => item.num = 0)
              uni.$emit('message-socket-end')
              uni.hideTabBar()
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .my-page {
    background: #ffffff;
    width: 100%;
    height: 100vh;
    overflow: hidden;


    // 整个头部区域
    .header {
      width: 100%;
      // height: 600rpx;
      background: #3FD3D1;
      overflow: hidden;

      // 用户头像信息ID区域
      .user-info {
        height: 120rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user-info-left-box {
          width: calc(100% - 156rpx);
          height: 100%;
          display: flex;
          align-items: center;

          .user-info-avatar {
            margin-right: 32rpx;
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }

          .login-container {
            width: calc(100% - 120rpx - 32rpx);
            height: 100%;
            display: flex;

            .login-btn {
              color: white;
              line-height: 120rpx;
            }
          }


          .id-num-box {
            width: calc(100% - 120rpx - 32rpx);
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: center;
            box-sizing: border-box;

            .user-name {
              color: white;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 36rpx;
              line-height: 50rpx;
            }

            .user-ids {
              display: flex;
              align-items: center;

              .user-id {
                color: white;
                line-height: 40rpx;
                font-size: 28rpx;
                padding-right: 8rpx;
              }

              .user-tags {
                border: 2rpx solid #ffffff;
                border-radius: 8rpx;
                color: white;
                font-size: 20rpx;
                line-height: 22rpx;
                text-align: center;
                padding: 4rpx 8rpx;
                box-sizing: border-box;

              }
            }
          }

        }

        .user-info-right-box {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 156rpx;

          .text {
            color: #fff;
            font-size: 28rpx;
          }

          .right-icon {
            padding-right: 16rpx;
            transform: rotateZ(180deg);
          }
        }
      }

      // 我的关注，粉丝，资料区域
      .user-data {
        padding: 64rpx 100rpx 0rpx 100rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >view {
          display: flex;
          flex-direction: column;
          align-items: center;

          text:nth-child(1) {
            font-size: 32rpx;
            line-height: 34rpx;
            font-weight: bold;
            color: white;
          }

          text:nth-child(2) {
            font-size: 24rpx;
            line-height: 40rpx;
            color: white;
            margin-top: 16rpx;
          }
        }
      }
    }

    .drag-content {
      background: #ffffff;

      // 弧状区域占位
      .arc-container {
        width: calc(100% + 90rpx);
        height: 40rpx;
        transform: translateX(-45rpx);
        background: #3FD3D1;
        border-bottom-right-radius: 375rpx 100%;
        border-bottom-left-radius: 375rpx 100%;
      }

      .scroll-container {
        height: calc(100vh - 494rpx);

        .scroll-container-content {
          padding-top: 64rpx;
          padding-bottom: 64rpx;
        }
      }

      // 个人中心功能区域
      .my-functions {
        width: 100%;
        background: #ffffff;
        padding: 0rpx 32rpx;
        box-sizing: border-box;

        .icon {
          width: 48rpx;
          height: 48rpx;
        }

        view {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #EEF2F4;
          padding: 32rpx 0rpx 32rpx 0rpx;

          image {
            width: 48rpx;
          }

          text {
            color: #333333;
            margin-left: 36rpx;
            font-size: 28rpx;
          }

          &:last-child {
            border-bottom: 0px solid #EEF2F4;
          }
        }
      }
    }




    // 联系我们
    .contact-us {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translate(-50%, -50%);

      .contact-us-logo {
        width: 70%;
        z-index: 1;
        transform: translate(-10rpx, 13px);
      }

      .contact-us-content {
        width: 100%;
        background: #ffffff;
        border-radius: 15rpx;
        padding: 80rpx 0rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .contact-us-content-title {
          position: absolute;
          top: 5rpx;
          left: 50%;
          font-size: 20rpx;
          color: #7A7A7A;
          transform: translateX(-40%);
        }

        text {
          line-height: 48rpx;
          font-size: 32rpx;
          color: #3FD3D1;

          &:last-child {
            margin-top: 30rpx;
          }
        }
      }
    }

    //退出登录
    .exit-container {
      padding: 0rpx 32rpx;
      box-sizing: border-box;
      width: 100%;
      padding-top: 282rpx;
      padding-bottom: 72rpx;

      .exit-btn {
        width: 100%;
        height: 96rpx;
        border-radius: 4px;
        background: #F75454;
        color: #FFFFFF;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

  }
</style>